<template>
    <div class="search">
      <yin-nav :styleList="searchNavList" :activeName="activeName" @click="handleChangeView"></yin-nav>
      <component class="search-list" :is="currentView"></component>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, shallowRef, reactive } from "vue";
  import YinNav from "@/components/layouts/YinNav.vue";
  import SearchSong from "./SearchSong.vue";
  import SearchSongList from "./SearchSongList.vue";
  
  // 响应式数据
  const searchNavList = reactive([
    {
      name: "歌曲",
      value: "SearchSong",
    },
    {
      name: "歌单",
      value: "SearchSongList",
    },
  ]);
  
  const activeName = ref("歌曲");
  // 使用shallowRef避免组件被深度响应式化
  const currentView = shallowRef(SearchSong);
  
  // 组件映射，确保组件不会被响应式化
  const componentMap = {
    SearchSong,
    SearchSongList
  };
  
  // 方法
  const handleChangeView = (item: { name: string; value: string }) => {
    activeName.value = item.name;
    currentView.value = componentMap[item.value as keyof typeof componentMap];
  };
  </script>
  
  <style lang="scss" scoped>
  // 使用Sass 3.0新模块系统导入
  @use "@/assets/css/var" as *;
  @use "@/assets/css/global";
  
  .search {
    margin: auto;
    width: 900px;
  
    .search-list {
      min-height: 480px;
    }
  }
  </style>